<!--
 * @Descripttion: 
 * @version: 
 * @Author: mmzhang
 * @Date: 2021-07-02 15:18:33
 * @LastEditTime: 2021-07-12 17:20:57
-->
<template>
  <div>
    <div class="buildingTabAll">
      <div class="tabTit">
        <span>序号</span>
        <span><em style="color: #de1f37">*</em> 楼栋号</span>
        <span>建筑类型</span>
      </div>
      <div class="tabCon">
        <div class="tabFor" v-for="(item, index) in buildList" :key="index">
          <span>{{ index + 1 }}</span>
          <span>
            <Input v-model="item.buildingName" @on-keyup="inputBuildingName(item)"
              placeholder="请填写楼栋号" :maxlength="10"></Input></span>
          <span>
            <Select v-model="item.buildingType" placeholder="请选择建筑类型">
              <Option :value="item.key" :key="item.key" v-for="(item, itemIndex) in buildDrop">
                {{ item.value }}</Option>
            </Select>
          </span>
          <span :class="[{ hide: buildList.length == 1 }, 'hand']"
            @click="deleteBuild(index)">删除</span>
        </div>
      </div>
      <div class="tip">请填写楼栋完整名称，如：A1幢</div>
      <div class="tipAdd hand" @click="addBuild">
        <Icon size="20" class="IconAdd" color="#2d8cf0" type="md-add-circle" />增加一个楼栋
      </div>
    </div>
    <div class="newBuildingFooter flex flex-horizontal-end">
      <Button @click="newBuildingCancel">取消</Button>
      <Button type="info" @click="newBuildingOk">确认</Button>
    </div>
  </div>
</template>
<script>
  import roomMgr from '@/biz/building/room.js'
  export default {
    props: ['productId', 'buildDrop'],
    data() {
      return {
        buildList: [
        {
          buildingName: '',
          buildingType: '',
        }, ],
      }
    },
    methods: {
      // 添加一条楼栋信息
      addBuild() {
        this.buildList.push({
          buildingName: '',
          buildingType: '',
        })
      },
      // 删除楼栋
      deleteBuild(index) {
        this.buildList.splice(index, 1)
      },
      newBuildingCancel() {
        this.$emit('onClose')
      },
      inputBuildingName(item) {
        let specialWords = this.$dt.dictInfo().specialWords[0].key
        let reg = new RegExp(specialWords, 'im')
        item.buildingName = item.buildingName.replace(reg, '')
      },
      newBuildingOk() {
        // 判断楼栋号必填项是否填完
        if (this.buildList.some((item) => item.buildingName == '')) {
          this.$Message.error('请检查，楼栋号必填！')
          return false
        }
        // 判断楼栋号是否有重复
        let filterArr = this.buildList.map(i => (i.buildingName))
        let filterKeyArr = Array.from(new Set(filterArr))
        if (filterKeyArr.length != filterArr.length) {
          this.$Message.error('请检查，该产品下存在相同楼栋号的情况！')
          return false
        }
        // 提交信息
        this.buildList.forEach((item) => {
          item.housesId = JSON.parse(this.$tool.getStorage('buildMess')).housesId
          item.productId = this.productId
        })

        let parmas = {
          buildingVOS: this.buildList,
        }
        roomMgr
          .saveBuild(parmas)
          .then((res) => {
            this.$emit('onClose')
            this.$emit('onRefresh')
          })
          .catch((res) => this.$Message.error(res))
      },
    },
  }
</script>
<style lang="scss" scoped>
  .buildingTabAll {
    .tabTit {
      overflow: hidden;

      span {
        float: left;
        width: 40%;
        padding-left: 20px;
      }

      span:first-child {
        width: 10%;
        padding: 0;
      }
    }

    .tabCon {
      max-height: 400px;
      overflow: auto;

      .tabFor {
        overflow: hidden;
        margin-top: 5px;
        line-height: 32px;

        span {
          float: left;
          width: 40%;
          padding: 0 5px;
        }

        span:first-child {
          width: 10%;
        }

        span:last-child {
          width: 10%;
          float: right;
          text-align: center;
          color: #2d8cf0;
          cursor: pointer;
        }
      }
    }

    .tip {
      font-size: 14px;
      color: #c5c8ce;
      margin: 10px 0 10px 50px;
    }

    .tipAdd {
      margin: 10px 0 10px 50px;
      color: #2d8cf0;
    }

    .hide {
      display: none;
    }
  }

  .newBuildingFooter {
    ::v-deep .ivu-btn {
      margin-left: 10px;
    }
  }
</style>